<template>
  <div class="winningRecord">
    <div class="winningRecord_tab">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="{ active: selectedTabId === tab.id }"
        @click="selectedTabId = tab.id"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="winningRecord_list">
      <Placeholder v-if="visibleRecords.length === 0" />
      <ul>
        <li v-for="item in visibleRecords" :key="item.id">
          <div class="top_box">
            <span>{{ lang.uid }}:{{ item.uid }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
          <div class="bottom_box">
            <span>{{ lang.winning_won }}</span>
            <div>
              <span>
                {{
                  item.type === "label"
                    ? lang[item.labelKey]
                    : `${userStore.moneyUnit}${item.amount}`
                }}
              </span>
              <NuxtImg :src="item.icon" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/slot");
const userStore = useUserStore();

interface TabItem {
  id: number;
  title: string;
}
interface BaseRecord {
  id: number;
  uid: string;
  time: string;
  icon: string;
}
interface LabelRecord extends BaseRecord {
  type: "label";
  labelKey:
    | "grand_prize_mini"
    | "grand_prize_minor"
    | "grand_prize_major"
    | "grand_prize_grand";
}
interface AmountRecord extends BaseRecord {
  type: "amount";
  amount: string;
}

type RecordItem = LabelRecord | AmountRecord;

const tabs: TabItem[] = [
  { id: 1, title: lang.winning_tab_prize },
  { id: 2, title: lang.winning_tab_mine },
];

const selectedTabId = ref<number>(1);

const prizeRecords: RecordItem[] = [
  {
    id: 1,
    uid: "4143163",
    time: "2025-08-20 09:07:42",
    type: "label",
    labelKey: "grand_prize_minor",
    icon: "/images/activity/slot/img_2.png",
  },
  {
    id: 2,
    uid: "4046046",
    time: "2025-08-20 09:06:58",
    type: "label",
    labelKey: "grand_prize_mini",
    icon: "/images/activity/slot/img_1.png",
  },
  {
    id: 3,
    uid: "4194802",
    time: "2025-08-20 09:05:39",
    type: "amount",
    amount: "17",
    icon: "/images/activity/slot/img_7.png",
  },
  {
    id: 4,
    uid: "3775802",
    time: "2025-08-20 09:04:59",
    type: "label",
    labelKey: "grand_prize_minor",
    icon: "/images/activity/slot/img_2.png",
  },
  {
    id: 5,
    uid: "4107960",
    time: "2025-08-20 09:03:17",
    type: "label",
    labelKey: "grand_prize_mini",
    icon: "/images/activity/slot/img_1.png",
  },
  {
    id: 6,
    uid: "3836827",
    time: "2025-08-20 09:01:59",
    type: "label",
    labelKey: "grand_prize_mini",
    icon: "/images/activity/slot/img_1.png",
  },
  {
    id: 7,
    uid: "3526034",
    time: "2025-08-20 09:01:57",
    type: "label",
    labelKey: "grand_prize_major",
    icon: "/images/activity/slot/img_3.png",
  },
  {
    id: 8,
    uid: "4181713",
    time: "2025-08-20 09:01:32",
    type: "amount",
    amount: "17",
    icon: "/images/activity/slot/img_7.png",
  },
  {
    id: 9,
    uid: "3940783",
    time: "2025-08-20 09:00:58",
    type: "label",
    labelKey: "grand_prize_major",
    icon: "/images/activity/slot/img_3.png",
  },
  {
    id: 10,
    uid: "3900380",
    time: "2025-08-20 09:00:22",
    type: "label",
    labelKey: "grand_prize_minor",
    icon: "/images/activity/slot/img_2.png",
  },
];

const myRecords: RecordItem[] = prizeRecords.slice(0, 5);

const visibleRecords = computed<RecordItem[]>(() =>
  selectedTabId.value === 1 ? prizeRecords : myRecords
);
</script>

<style scoped lang="scss">
.winningRecord {
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-color4);
  color: var(--theme-neutral1);
  border-radius: 0.3rem;
  overflow: hidden;

  .winningRecord_tab {
    display: flex;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 1.2rem;
      color: var(--theme-neutral2);
      font-weight: 800;
      font-size: 0.38rem;

      &.active {
        background: var(--theme-color1);
        color: var(--theme-neutral1);
      }
    }
  }

  .winningRecord_list {
    border-radius: 0 0 0.3rem 0.3rem;
    overflow: hidden;

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      max-height: 7rem;
      overflow-y: auto;

      li {
        padding: 0.2rem 0.32rem 0.1rem;
        background: #ffffff0d;
        margin-bottom: 0.1rem;

        .top_box {
          display: flex;
          justify-content: space-between;
          font-weight: 800;
          font-size: 0.38rem;

          .time {
            font-weight: 500;
            font-size: 0.34rem;
            color: var(--theme-neutral2);
          }
        }

        .bottom_box {
          display: flex;
          justify-content: space-between;
          align-items: center;

          div {
            display: flex;
            align-items: center;
            gap: 0.1rem;

            span {
              font-weight: 800;
              font-size: 0.38rem;
              color: var(--theme-dec4);
            }

            img {
              width: 0.8rem;
            }
          }
        }
      }
    }
  }
}
</style>
